<template>
	<view class="index">
		<div class="title">首页</div>
		<div class="notice">
			<div class="avatar">
				<img src="@/static/logo.png" alt="">
			</div>
			<div class="info">
				<div class="text1">尊敬的用户：</div>
				<div class="text2">欢迎来到扭蛋展示平台中心</div>
			</div>
		</div>
		<div class="notice home-panel">
			<div class="wrap">
				<div class="avatar">
					<img src="@/static/app-icon.png" alt="">
				</div>
				<div class="info">
					<div class="text1">
						<div>
							<img src="@/static/home/title.png" class="icon1" alt="">
							<span>标题：</span>
						</div>
						<img src="@/static/home/share.png" class="icon2" alt="">
						</div>
					<div class="text2">介绍文案介绍文案介绍文案介绍文案介绍文案</div>
				</div>
			</div>
			<div class="pic">
				<img src="@/static/app-icon.png" alt="">
			</div>
		</div>
		<div class="notice home-panel">
			<div class="wrap">
				<div class="avatar">
					<img src="@/static/app-icon.png" alt="">
				</div>
				<div class="info">
					<div class="text1">
						<div>
							<img src="@/static/home/title.png" class="icon1" alt="">
							<span>标题：</span>
						</div>
						<img src="@/static/home/share.png" class="icon2" alt="">
						</div>
					<div class="text2">介绍文案介绍文案介绍文案介绍文案介绍文案</div>
				</div>
			</div>
			<div class="pic">
				<img src="@/static/app-icon.png" alt="">
			</div>
		</div>
		<!-- <van-dialog v-model="show" title="标题" show-cancel-button>
			<img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
		</van-dialog> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true
			}
		},
		onLoad() {
		},
		onReachBottom() {

		},
		onPullDownRefresh() {
		},
		methods: {
		}
	}
</script>


<style lang="postcss" scoped>
	.index {
		width: 100vh;
		background: url(@/static/home/homebg.png) center center no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		font-family: "Source Han Sans";
		.title {
			color: #ffffff;
			text-align: center;
			font-size: 36upx;
			font-weight: 400;
			font-family: "Source Han Sans";
			margin-top:48upx;
		}
		.notice {
			width: 640upx;
			height: 128upx;
			margin-top: 48upx;
			background: url(@/static/home/notice.png) center center no-repeat;
			background-size: contain;
			display: flex;
			padding: 40upx 0 0 30upx;
			.avatar {
				img {
					width: 72upx;
					height:72upx;
					display:block;
					border-raduis: 50%;
				}
			}
			.info {
				margin-left: 16upx;
				.text1 {
					font-size: 28upx;
					color:rgba(255,255,255,.8);
					display:flex;
					justify-content: space-between;
					align-items:center;
				}
				.text2 {
					font-size: 24upx;
					color: #fff;
					color:rgba(255,255,255,.6)
				}
				.icon1 {
					width: 16upx;
					margin-right: 10upx;
				}
				.icon2 {
					width: 24upx;
					height: 24upx;
				}
			}
		}
		.home-panel {
			width: 658upx;
			height: 288upx;
			background: url(@/static/home/panel.png) center center no-repeat;
			background-size: contain;
			display: block;
			.wrap {
				display: flex;
				width: 692upx;
			}
			.pic {
				display: block;
				margin-top: 26upx;
				img {
					width: 612upx;
					height: 124upx;
				}
			}
			.info {
				width: 75%;
				.text1 {
					color: #fff;
				}
			}
		}
	}
</style>
